<script setup>
import { ref,computed ,onMounted} from 'vue';
import { use_app_store } from './stores/useAppStore'; // 确保路径正确
import { storeToRefs } from 'pinia';

const store = use_app_store();

// 从 store 中获取 todoList, showClearCompleted, uncompleted
const { todoList, showClearCompleted, uncompleted } = storeToRefs(store);

//全选状态 完成
const flagCompleted = ref(false)
const AllCompletted = () =>{
  if(flagCompleted.value){
    todoList.value.forEach(item => item.completed = false)
    flagCompleted.value = false
  } else {
    todoList.value.forEach(item => item.completed = true)
    flagCompleted.value = true
  }
}


//添加todoAddTodo
const AddTodo = ref("")
const funAddTodo = () =>{
  let newTodo = {
      id:Date.now(),
      title:AddTodo.value,
      completed:false
  }
  todoList.value.push(newTodo)
  AddTodo.value =""
  console.log(todoList.value)
}

//删除todo
const removeTodo = (todo) => {
   todoList.value.splice(todoList.value.indexOf(todo),1)
}



//状态选择跳转
const visibility = ref("all")

const onHashChange = () =>{
  const hash = window.location.hash.replace(/#\/?/,'') // 匹配  /#/~ 
  console.log(hash)
  if(['all','active','completed'].includes(hash)){
    visibility.value = hash
    console.log(visibility.value)

  } else {
    window.location.hash = ""
    visibility.value = "all"
  }
}

onMounted(()=>{
  window.addEventListener("hashchange",onHashChange)
})

const fiterTODOList = computed(()=>{
  switch(visibility.value){
    case "all":
      return todoList.value
    case "active":
      return todoList.value.filter(item => item.completed === false)
    case "completed":
      return todoList.value.filter(item => item.completed === true)
}
})

//清空已完成的
const clearAllCompleted = () =>{
  todoList.value = todoList.value.filter(item => item.completed === false)
}

//编辑框展示
const currentItem = ref({})

const  toEdit = (todo)=>{
  currentItem.value = todo
}

//将数据存储到本地


</script>

<template>
		<section class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<input class="new-todo" placeholder="What needs to be done?" autofocus v-model="AddTodo" @keyup.enter="funAddTodo" >
			</header>
			<!-- This section should be hidden by default and shown when there are todos -->
			<section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox" @click="AllCompletted">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the structure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
					<li v-for="todo in fiterTODOList" :key="todo.id" :class="{completed: todo.completed}">
						<div class="view" >
							<input class="toggle" type="checkbox"  v-model="todo.completed">
							<label @dblclick="toEdit(todo)">{{ todo.title }}</label>
							<button class="destroy" @click="removeTodo(todo)"></button>
						</div>
						<input class="edit" @focus="currentItem = todo"   :value="todo.title">
					</li>
				</ul>
			</section>
			<!-- This footer should be hidden by default and shown when there are todos -->
			<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{ uncompleted }}</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters">
					<li>
						<a class="selected" href="#/">All</a>
					</li>
					<li>
						<a href="#/active">Active</a>
					</li>
					<li>
						<a href="#/completed">Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" @click="clearAllCompleted" v-show="showClearCompleted">Clear completed</button>
			</footer>
		</section>
</template>

<style scoped>

</style>
